<template>
  <div class="movie-contain" >
    <img class="movie_img" :src="detailMovie.img | replace" />
<!--    内容详情-->
    <div class="list-details">
      <div class="list-dra">{{detailMovie.nm}}</div>
      <div class="list-enm">{{detailMovie.enm}}</div>
       <div class="list-sc">
           {{detailMovie.sc}}
           <span class="list-snum">{{detailMovie.snum}}万人评</span>
       </div>
       <div class="list-cat">
           {{detailMovie.cat}}
           <span class="list-version">{{detailMovie.version}}</span>
       </div>
        <div class="list-src">{{detailMovie.src}}/{{detailMovie.dur}}分钟</div>
        <div class="list-src">{{detailMovie.pubDesc}}</div>
    </div>
<!--    跳转-->
    <div class="right">
      <router-link to="/home/movielist/movieinfo"><i></i></router-link>
    </div>
  </div>
</template>
<script >
    import {getmovieinfo} from "../api/index"
    export default {
        data: function () {
            return {
                detailMovie:{}
            }
        },
       async created() {
            console.log(111)
           const {detailMovie} =await getmovieinfo()
           this.detailMovie=detailMovie
        },
        filters: {
            replace: function (val) {
                return val.replace("/w.h/", "/80.90/")
            },
        }

    }
</script>
<style lang="scss" scoped>
  .movie-contain{
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 188px;
    padding: 20px;
    background: #666666;
    img{
      width: 110px;
      height: 150px;
    }
    .list-details{
      margin-left: 13px;
      display: flex;
      width: 150px;
      flex-direction: column;
        .list-dra{
            font-size: 20px;
            font-weight: 700;
            text-overflow:ellipsis;
            overflow: hidden;
            color: #ffffff;
            margin-bottom: 0;
            height: 40px;
        }
        .list-enm{
            margin-top: 5px;
            font-size: 12px;
            color: #fff;
            opacity: .8;
        }
        .list-sc{
            font-size: 18px;
            font-weight: 700;
            color: #fc0;
            margin-top: 8px;
            .list-snum{
                margin-top: 7px;
                font-size: 12px;
                color: #fff;
                opacity: .8;
            }
        }
        .list-cat{
            margin-top: 7px;
            font-size: 12px;
            color: #fff;
            opacity: .8;
        }
        .list-src{
            font-size: 12px;
            color: #fff;
            opacity: .8;
        }
    }
    .right{
      width: 10px;
     i{
       margin-top:55px;
       display: block;
       width: 10px;
       height: 10px;
       border-top: 2px solid #fff;
       border-right: 2px solid #fff;
       transform: rotate(45deg);
     }
    }
  }
</style>